<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            display: flex;
        }
        .editor-container {
            width: 50%;
            padding-right: 20px;
        }
        .preview-container {
            width: 50%;
            border-left: 1px solid #ccc;
            padding-left: 20px;
        }
        label {
            display: block;
            margin-top: 10px;
        }
        select {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
        }
        .attribute-list {
            margin-top: 20px;
        }
        .attribute-item {
            margin-bottom: 10px;
        }
        .attribute-key, .attribute-value {
            width: calc(50% - 10px);
            padding: 8px;
            margin-top: 5px;
        }
        .attribute-key {
            margin-right: 10px;
        }
        textarea {
            width: 100%;
            height: 100px;
            padding: 8px;
            margin-top: 5px;
        }
        .preview-box {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            min-height: 150px;
        }
        button {
            margin-top: 10px;
        }
    </style>
</head>
<body>

<div class="editor-container">
    <h2>动态获取元素所有配置属性及潜在属性并图形化编辑器</h2>
    <label for="elementSelector">选择元素:</label>
    <select id="elementSelector">
        <!-- Options will be populated dynamically -->
    </select>

    <div class="attribute-list" id="attributeList">
        <!-- Attributes will be displayed here -->
    </div>

    <label for="content">内容:</label>
    <textarea id="content"></textarea>

    <button onclick="updateContent()">更新内容</button>
</div>

<div class="preview-container">
    <h2>预览</h2>
    <div id="preview-box" class="preview-box">
        <p id="sampleText">这是一个示例文本。</p>
        <img id="sampleImage" src="https://gips3.baidu.com/it/u=100751361,1567855012&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280" alt="Sample Image">
        <a id="sampleLink" href="#">示例链接</a>
        <input id="sampleInput" type="text" placeholder="示例输入框">
    </div>
</div>

<script>
    const elementSelector = document.getElementById('elementSelector');
    const attributeList = document.getElementById('attributeList');
    const contentTextarea = document.getElementById('content');
    const previewBox = document.getElementById('preview-box');

    const potentialAttributes = {
        p: ['id', 'class', 'style'],
        img: ['id', 'class', 'src', 'alt', 'style'],
        a: ['id', 'class', 'href', 'target', 'style'],
        input: ['id', 'class', 'type', 'name', 'value', 'placeholder', 'style']
    };

    function populateElementSelector() {
        const elements = previewBox.querySelectorAll('*');
        elements.forEach(element => {
            const option = document.createElement('option');
            option.value = element.id || element.tagName;
            option.textContent = element.id ? `${element.tagName}#${element.id}` : element.tagName;
            elementSelector.appendChild(option);
        });
    }

    function getSelectedElement() {
        const selectedValue = elementSelector.value;
        return previewBox.querySelector(`#${selectedValue}`) || previewBox.querySelector(selectedValue);
    }

    function populateAttributeList(element) {
        attributeList.innerHTML = '';
        if (!element) return;

        const tagName = element.tagName.toLowerCase();
        const allAttributes = Array.from(element.attributes).map(attr => attr.name);
        const combinedAttributes = [new Set([allAttributes, (potentialAttributes[tagName] || [])])];

        combinedAttributes.sort().forEach(attr => {
            const div = document.createElement('div');
            div.className = 'attribute-item';

            const keyInput = document.createElement('input');
            keyInput.className = 'attribute-key';
            keyInput.type = 'text';
            keyInput.value = attr;
            keyInput.oninput = () => updateAttribute(keyInput, valueInput);

            const valueInput = document.createElement('input');
            valueInput.className = 'attribute-value';
            valueInput.type = 'text';
            valueInput.value = element.getAttribute(attr) || '';
            valueInput.oninput = () => updateAttributeValue(keyInput, valueInput);

            div.appendChild(keyInput);
            div.appendChild(valueInput);
            attributeList.appendChild(div);
        });

        contentTextarea.value = element.innerHTML;
    }

    function updateAttribute(keyInput, valueInput) {
        const element = getSelectedElement();
        if (element) {
            const oldKey = keyInput.getAttribute('data-old-key') || keyInput.value;
            const newKey = keyInput.value.trim();
            const newValue = valueInput.value.trim();

            if (oldKey && newKey !== oldKey) {
                element.removeAttribute(oldKey);
            }

            if (newKey) {
                element.setAttribute(newKey, newValue);
                keyInput.setAttribute('data-old-key', newKey);
            }
        }
    }

    function updateAttributeValue(keyInput, valueInput) {
        const element = getSelectedElement();
        if (element) {
            const key = keyInput.value.trim();
            const value = valueInput.value.trim();
            if (key) {
                element.setAttribute(key, value);
            }
        }
    }

    function updateContent() {
        const element = getSelectedElement();
        if (element) {
            element.innerHTML = contentTextarea.value;
        }
    }

    // Populate the selector with existing elements in the preview box
    populateElementSelector();

    // Event listeners for dynamic updates
    elementSelector.addEventListener('change', () => {
        const element = getSelectedElement();
        populateAttributeList(element);
    });

    // Initial setup
    elementSelector.dispatchEvent(new Event('change'));
</script>

</body>
</html>